<!DOCTYPE html>
<html>
<head>
    <title>P-V Diagram for a Thermodynamic Cycle</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>

<canvas id="myCanvas" width="550" height="550"></canvas>

<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.font = 'italic 18px Times New Roman';
    ctx.fillStyle = 'black';
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 1.5;

    // Coordinate system parameters
    const originX = 80;
    const originY = 470;
    const xAxisLength = 400;
    const yAxisLength = 400;

    // Draw axes
    function drawArrow(fromX, fromY, toX, toY) {
        const headlen = 10; // length of head in pixels
        const dx = toX - fromX;
        const dy = toY - fromY;
        const angle = Math.atan2(dy, dx);
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        ctx.lineTo(toX - headlen * Math.cos(angle - Math.PI / 6), toY - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headlen * Math.cos(angle + Math.PI / 6), toY - headlen * Math.sin(angle + Math.PI / 6));
    }

    ctx.beginPath();
    // Y-axis (p)
    drawArrow(originX, originY, originX, originY - yAxisLength);
    // X-axis (V)
    drawArrow(originX, originY, originX + xAxisLength, originY);
    ctx.stroke();

    // Axes labels
    ctx.fillText('p', originX - 25, originY - yAxisLength + 10);
    ctx.fillText('V/L', originX + xAxisLength + 5, originY + 5);
    ctx.fillText('O', originX - 20, originY + 20);

    // Define coordinates for points a, b, c based on the diagram's visual representation
    const x_20 = originX + 120;
    const x_40 = originX + 320;

    const y_pb = originY - 120;
    const y_pa = originY - 280;

    const pointA = { x: x_20, y: y_pa };
    const pointB = { x: x_40, y: y_pb };
    
    // In the provided image, point c is visually to the right of point a's volume (20),
    // and process c->a is a curve, not a vertical line. This implies Vc > Va.
    // The curve b->c is horizontal (isobaric).
    // Based on the visual, let's place c at an intermediate volume.
    const pointC = { x: x_20 + 60, y: y_pb };


    // Draw the cycle path
    ctx.beginPath();
    ctx.moveTo(pointA.x, pointA.y);

    // Process a -> b (Isothermal expansion, curved)
    // Using a quadratic curve that is convex from the origin.
    // The control point is set at the corner (xB, yA) to create a smooth, convex arc.
    ctx.quadraticCurveTo(pointB.x, pointA.y, pointB.x, pointB.y);

    // Process b -> c (Isobaric compression, straight line)
    ctx.lineTo(pointC.x, pointC.y);

    // Process c -> a (Adiabatic compression, steeper curve than isotherm)
    // The control point is set at the corner (xA, yC) to create a steeper curve.
    ctx.quadraticCurveTo(pointA.x, pointC.y, pointA.x, pointA.y);
    ctx.stroke();

    // Draw dashed lines and labels
    ctx.beginPath();
    ctx.setLineDash([5, 3]);

    // Dashed lines for point a
    ctx.moveTo(pointA.x, pointA.y);
    ctx.lineTo(pointA.x, originY);
    ctx.moveTo(pointA.x, pointA.y);
    ctx.lineTo(originX, pointA.y);

    // Dashed lines for point b
    ctx.moveTo(pointB.x, pointB.y);
    ctx.lineTo(pointB.x, originY);
    ctx.moveTo(pointB.x, pointB.y);
    ctx.lineTo(originX, pointB.y);

    // Dashed line for point c (only to y-axis as it shares pressure with b)
    ctx.moveTo(pointC.x, pointC.y);
    ctx.lineTo(pointC.x, originY); // line to x-axis as in the original
    
    ctx.stroke();
    ctx.setLineDash([]); // Reset line dash

    // Labels for points
    ctx.font = 'italic 20px Times New Roman';
    ctx.fillText('a', pointA.x - 5, pointA.y - 8);
    ctx.fillText('b', pointB.x + 8, pointB.y + 5);
    ctx.fillText('c', pointC.x - 15, pointC.y + 5);

    // Labels on axes
    ctx.font = '16px Times New Roman';
    ctx.fillText('p', originX - 20, y_pa + 5);
    ctx.save();
    ctx.font = 'italic 12px Times New Roman';
    ctx.fillText('a', originX - 12, y_pa + 10);
    ctx.restore();

    ctx.fillText('p', originX - 20, y_pb + 5);
    ctx.save();
    ctx.font = 'italic 12px Times New Roman';
    ctx.fillText('b', originX - 12, y_pb + 10);
    ctx.restore();

    ctx.fillText('20', x_20 - 10, originY + 20);
    ctx.fillText('40', x_40 - 10, originY + 20);
    
    // Caption
    ctx.font = '18px Arial';
    ctx.textAlign = 'center';
    ctx.fillText('习题 6-17 图', canvas.width / 2, originY + 60);

</script>

</body>
</html>